<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>别捅马蜂窝</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      margin: 0;
      height: 100vh;
      background-color: #f5fccd;
      overflow: hidden;
      cursor: none;
    }

    .hive-line {
      position: absolute;
      width: 0.2rem;
      height: 3rem;
      background-color: #12486b;
      box-shadow: 2rem -0.5rem 1rem 0 rgba(0, 0, 56, 0.5);
    }
    .hive-line--provoked {
      transform-origin: 50% -2rem;
      animation: swing;
      animation-duration: 1s;
      animation-iteration-count: 2;
    }
    @keyframes swing {
      0%,
      100% {
        transform: rotate(0deg);
      }
      33.33% {
        transform: rotate(-10deg);
      }
      66.66% {
        transform: rotate(10deg);
      }
    }

    .hive-text {
      position: absolute;
      top: 1rem;
      left: calc(50vw - 8rem);
      width: 5rem;
      font-family: 'Archivo Black', sans-serif;
      color: #12486b;
    }
    .hive-text:before {
      content: '';
      position: absolute;
      bottom: -2rem;
      left: 3rem;
      width: 0.2rem;
      height: 2rem;
      background-color: #12486b;
      transform: rotate(-45deg);
    }

    .hive {
      position: relative;
      width: 8rem;
      height: 10rem;
      margin-top: 3rem;
      border-radius: 50%;
      background: radial-gradient(circle at 0 0, #fff -20%, orange);
      overflow: hidden;
      box-shadow: 2rem 1rem 2rem 0 rgba(0, 0, 56, 0.5);
    }
    .hive--provoked {
      transform-origin: 50% -4rem;
      animation: swing;
      animation-duration: 1s;
      animation-iteration-count: 2;
    }
    @keyframes swing {
      0%,
      100% {
        transform: rotate(0deg);
      }
      33.33% {
        transform: rotate(-10deg);
      }
      66.66% {
        transform: rotate(10deg);
      }
    }
    .hive__division {
      position: absolute;
      width: 100%;
      height: 0.2rem;
      background: linear-gradient(90deg, #ff7d66, #000038 300%);
    }
    .hive__division:nth-child(1) {
      top: 10%;
    }
    .hive__division:nth-child(2) {
      top: 30%;
    }
    .hive__division:nth-child(3) {
      top: 50%;
    }
    .hive__division:nth-child(4) {
      top: 70%;
    }
    .hive__division:nth-child(5) {
      top: 90%;
    }
    .hive__door {
      position: absolute;
      left: 2.5rem;
      bottom: 2rem;
      width: 3rem;
      height: 3rem;
      border-top: 0.3rem solid #ff7d66;
      border-radius: 50%;
      background: linear-gradient(#12486b -100%, #000038);
    }

    .bee {
      position: absolute;
      top: 9rem;
      left: calc(50vw - 0.4rem);
      width: 0.8rem;
      height: 0.5rem;
      border-radius: 50%;
      background: linear-gradient(
              90deg,
              orange,
              orange 20%,
              #000038 20%,
              #000038 40%,
              orange 40%,
              orange 60%,
              #000038 60%,
              #000038 80%,
              orange 80%
      );
      box-shadow: 2rem 1rem 1rem 0 rgba(0, 0, 56, 0.6);
      transition-property: top, left;
      transition-duration: 0.5s;
      animation: flying;
      animation-duration: 10s;
      animation-iteration-count: infinite;
    }
    .bee:before,
    .bee:after {
      content: '';
      position: absolute;
      top: -0.3rem;
      width: 0.3rem;
      height: 0.3rem;
      background: rgba(255, 255, 255, 0.6);
    }
    .bee:before {
      left: 0;
      border-radius: 0 0.2rem 0 0.2rem;
    }
    .bee:after {
      left: 0.3rem;
      border-radius: 0.2rem 0 0.2rem 0;
    }
    @keyframes flying {
      0% {
        top: 9rem;
        left: calc(50vw - 0.4rem);
        opacity: 0;
      }
      5% {
        opacity: 1;
      }
      10%,
      70% {
        top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
        left: calc(var(--left) + 1rem);
      }
      15%,
      75% {
        top: min(calc(var(--top) + 3rem), calc(80vh - 1rem));
        left: calc(var(--left) - 0.5rem);
      }
      20%,
      50% {
        top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
        left: calc(var(--left) - 1.5rem);
      }
      30%,
      60% {
        top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
        left: calc(var(--left) + 0.5rem);
      }
      40%,
      80% {
        top: min(var(--top), calc(80vh - 1rem));
        left: calc(var(--left) - 2.5rem);
      }
      35%,
      95% {
        top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem));
        left: calc(var(--left) - 3rem);
      }
      50%,
      90% {
        top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
        left: calc(var(--left) + 0.5rem);
      }
      100% {
        top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
        left: calc(var(--left) + 1.5rem);
      }
    }
    .bee:nth-child(4n) {
      animation: flying2;
      animation-duration: 12s;
      animation-iteration-count: infinite;
    }
    @keyframes flying2 {
      0% {
        top: 9rem;
        left: calc(50vw - 0.4rem);
        opacity: 0;
      }
      5% {
        opacity: 1;
      }
      20%,
      90% {
        top: min(calc(var(--top) + 1rem), calc(80vh - 1rem));
        left: calc(var(--left) + 5rem);
      }
      15%,
      75% {
        top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
        left: calc(var(--left) - 6rem);
      }
      30%,
      80% {
        top: min(calc(var(--top) + 4rem), calc(80vh - 1rem));
        left: calc(var(--left) - 1.5rem);
      }
      25%,
      65% {
        top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
        left: calc(var(--left) + 5rem);
      }
      90%,
      80% {
        top: min(calc(var(--top) + 4rem), calc(80vh - 1rem));
        left: calc(var(--left) - 3.5rem);
      }
      35%,
      95% {
        top: min(calc(var(--top) - 0.5rem), calc(80vh - 1rem));
        left: calc(var(--left) - 3rem);
      }
      50%,
      40% {
        top: min(calc(var(--top) - 5rem), calc(80vh - 1rem));
        left: calc(var(--left) + 0.5rem);
      }
      100% {
        top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
        left: calc(var(--left) + 1.5rem);
      }
    }
    .bee:nth-child(4n + 1) {
      animation: flying3;
      animation-duration: 20s;
      animation-iteration-count: infinite;
    }
    @keyframes flying3 {
      0% {
        top: 9rem;
        left: calc(50vw - 0.4rem);
        opacity: 0;
      }
      5% {
        opacity: 1;
      }
      15%,
      90% {
        top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
        left: calc(var(--left) + 5rem);
      }
      15%,
      75% {
        top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
        left: calc(var(--left) - 8rem);
      }
      30%,
      80% {
        top: min(calc(var(--top) + 2rem), calc(80vh - 1rem));
        left: calc(var(--left) + 5rem);
      }
      25%,
      65% {
        top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
        left: calc(var(--left) + 8rem);
      }
      35%,
      80% {
        top: min(calc(var(--top) + 8rem), calc(80vh - 1rem));
        left: calc(var(--left) - 8rem);
      }
      50%,
      95% {
        top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
        left: calc(var(--left) - 3rem);
      }
      90%,
      40% {
        top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
        left: calc(var(--left) + 5rem);
      }
      100% {
        top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
        left: calc(var(--left) - 8rem);
      }
    }
    .bee:nth-child(4n + 2) {
      animation: flying4;
      animation-duration: 15s;
      animation-iteration-count: infinite;
    }
    @keyframes flying4 {
      0% {
        top: 9rem;
        left: calc(50vw - 0.4rem);
        opacity: 0;
      }
      5% {
        opacity: 1;
      }
      15%,
      90% {
        top: min(calc(var(--top) - 3rem), calc(80vh - 1rem));
        left: calc(var(--left) + 2rem);
      }
      15%,
      75% {
        top: min(calc(var(--top) - 1rem), calc(80vh - 1rem));
        left: calc(var(--left) + 4rem);
      }
      30%,
      80% {
        top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
        left: calc(var(--left) - 2rem);
      }
      25%,
      65% {
        top: min(calc(var(--top) + 2rem), calc(80vh - 1rem));
        left: calc(var(--left) - 6rem);
      }
      35%,
      80% {
        top: min(calc(var(--top) - 6rem), calc(80vh - 1rem));
        left: calc(var(--left) + 6rem);
      }
      50%,
      95% {
        top: min(calc(var(--top) + 5rem), calc(80vh - 1rem));
        left: calc(var(--left) - 3rem);
      }
      90%,
      40% {
        top: min(calc(var(--top) - 2rem), calc(80vh - 1rem));
        left: calc(var(--left) + 1rem);
      }
      100% {
        top: min(calc(var(--top) + 3rem), calc(80vh - 1rem));
        left: calc(var(--left) - 4rem);
      }
    }

    .cursor {
      position: absolute;
      top: calc(var(--top, 11rem) - 2rem);
      left: calc(var(--left, 50vw) - 2rem);
      transform: rotate(-20deg);
      pointer-events: none;
    }
    .cursor path {
      fill: #12486b;
    }
    .cursor--red polygon {
      animation: hurting-hand;
      animation-duration: 30s;
      animation-delay: 2s;
      animation-fill-mode: forwards;
    }
    @keyframes hurting-hand {
      33% {
        fill: #ff7d66;
      }
      100% {
        fill: #419197;
      }
    }

    .water {
      position: absolute;
      top: 80vh;
      left: 0;
      width: 100%;
      height: 20vh;
      background: linear-gradient(#78d6c6, #12486b);
      opacity: 0.6;
    }
  </style>
</head>
<body>
<div id="hive-line" class="hive-line"></div>
<div class="hive-text">别点！</div>
<div id="hive" class="hive">
  <div class="hive__division"></div>
  <div class="hive__division"></div>
  <div class="hive__division"></div>
  <div class="hive__division"></div>
  <div class="hive__division"></div>
  <div class="hive__door"></div>
</div>
<div id="cursor" class="cursor">
  <svg
          xmlns:svg="http://www.w3.org/2000/svg"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.1"
          baseProfile="tiny"
          id="svg3010"
          x="0"
          y="0"
          width="4rem"
          height="4rem"
          viewBox="100 0 600 450"
          overflow="visible"
          xml:space="preserve"
  >
        <polygon
                fill="#FFFFFF"
                points="296,210 291,237 312,258 376,386 504,391 520,354.1 536,306 541,199 520,178 488,162 440,146   408,141 392,66 360,66 355,237 323,205 "
        />

    <path
            d="M344,66h16v176h-16v-16h-16v-16h16V66z M536,194v112h16V194H536z M280,194v48h16v-32h32v-16H280z M328,290v-32h-16v32H328z   M344,322v-32h-16v32H344z M360,354v48h160v-47.9h-16V386H376l0,0v-32H360l0-32h-16v32H360z M520,354h16v-48h-16V354z M312,258v-16  h-16v16H312z M520,178v16h16v-16H520z M488,162v64h16v-48h16v-16H488z M440,146v64h16v-48h32v-16H440z M408,130V66h-16v144h16v-64  h32v-16H408z M360,50v16h32V50H360z"
    />
      </svg>
</div>
<div id="bee-wrapper" class="bee_wrapper"></div>
<div id="water" class="water"></div>
<script>
  const hive = document.getElementById('hive');
  const hiveLine = document.getElementById('hive-line');
  const cursor = document.getElementById('cursor');
  const beeWrapper = document.getElementById('bee-wrapper');
  const water = document.getElementById('water');

  let provoked = false;
  const beeNumber = 30;

  hive.addEventListener('click', () => {
    hive.classList.add('hive--provoked');
    hiveLine.classList.add('hive-line--provoked');
    cursor.classList.add('cursor--red');
    provoked = true;
    let beeCount = 0;

    const intervalID = setInterval(() => {
      if (beeCount >= beeNumber) {
        clearInterval(intervalID);
      }
      const bee = document.createElement('div');
      bee.classList.add('bee');
      beeWrapper.appendChild(bee);
      beeCount = beeCount + 1;
    }, 300);
  });

  const cursorFunction = (mouse) => {
    const clientX = mouse.clientX
            ? mouse.clientX
            : mouse.touches[0].clientX;
    const clientY = mouse.clientY
            ? mouse.clientY
            : mouse.touches[0].clientY;
    document.body.style = `--top: ${clientY}px; --left: ${clientX}px;`;
  };

  window.addEventListener('mousemove', cursorFunction);
  window.addEventListener('touchstart', cursorFunction);

  water.addEventListener('mouseover', () => {
    cursor.classList.remove('cursor--red');
  });

  water.addEventListener('mouseout', () => {
    if (provoked) {
      cursor.classList.add('cursor--red');
    }
  });
</script>
</body>
</html>
